๋ค์ํ ์ฅ์น์ ํ๋ซํผ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ธฐ ์ํด ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ(PWA)์ ์ํ ์ญ๋์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ์ ์ํ ์์ด์ฝ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ ์ ์ํ ์์ด์ฝ: ๋์ ์์ด์ฝ ์์คํ ๊ตฌํ
์ค๋๋ ์ ๋์งํธ ํ๊ฒฝ์์ ์ํํ๊ณ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชจ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ(PWA)์ด ๊ณ์ํด์ ์ธ๊ธฐ๋ฅผ ์ป์ผ๋ฉด์ ์ฑ์ ์๊ฐ์ ํํ, ํนํ ์์ด์ฝ์ ์ฌ์ฉ์๋ฅผ ์ ์นํ๊ณ ์ ์งํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. ๋ค์ํ ํ๋ฉด ๋ชจ์๊ณผ ์ฅ์น ๋ชจ์์ ๋ง๊ฒ ์ค๊ณ๋ ์ ์ํ ์์ด์ฝ์ ์ด๋ฌํ ๋ฐ์ ์ ์ต์ ์ ์ ์์ต๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋๋ PWA ์ ์ํ ์์ด์ฝ์ ์ธ๊ณ๋ฅผ ๊น์ด ํ๊ณ ๋ค์ด ๊ตฌํ, ์ด์ ๋ฐ ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ฅผ ์ํ ์ค์ฉ์ ์ธ ์์ ๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ ์ํ ์์ด์ฝ์ด๋ ๋ฌด์์ ๋๊น?
์ ์ํ ์์ด์ฝ์ ์ฌ์ฉ์ ์ฅ์น์ ํน์ ์ปจํ ์คํธ์ ๋ง๊ฒ ๋ชจ์, ํฌ๊ธฐ ๋ฐ ๋ชจ์์ ๋์ ์ผ๋ก ์กฐ์ ํ๋๋ก ์ค๊ณ๋ ์ต์ ์ฑ ์์ด์ฝ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค. ์ ์ ์์ด์ฝ๊ณผ ๋ฌ๋ฆฌ ์ ์ํ ์์ด์ฝ์ ์ด์ ์ฒด์ ์ ์๊ฐ์ ์ธ์ด์ ์ํํ๊ฒ ํตํฉ๋์ด ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ณ ๋ค์ํ ํ๋ซํผ์์ ์ผ๊ด๋ ๋ชจ์๊ณผ ๋๋์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ์ ์์ฑ์ ๋ชจ๋ ์ฅ์น์์ ๊ธฐ๋ณธ ์ฑ๊ณผ ์ ์ฌํ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ PWA์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์ ์ํ ์์ด์ฝ์ ์ฃผ์ ์ด์ :
- ํฅ์๋ ์๊ฐ์ ๋งค๋ ฅ: ์ ์ํ ์์ด์ฝ์ ๋ชจ๋ ์ฅ์น์์ ์ธ๋ จ๋๊ณ ์ ๋ฌธ์ ์ผ๋ก ๋ณด์ด๋ฉฐ ๊ธ์ ์ ์ธ ์ฒซ์ธ์์ ๊ธฐ์ฌํฉ๋๋ค.
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ํ๋ซํผ ๊ฐ ์ผ๊ด๋ ์์ด์ฝ ๋ชจ์์ ์น์ํจ๊ณผ ์ฌ์ฉ ํธ์์ฑ์ ํฅ์์ํต๋๋ค.
- ๋ธ๋๋ฉ ๋ฐ ์ธ์ง๋: ์ ๋์์ธ๋ ์์ด์ฝ์ ๋ธ๋๋ ์ธ์ง๋ ๋ฐ ์ฌ์ฉ์ ํ์์ ํ์์ ์ ๋๋ค.
- ํ๋ซํผ ํธํ์ฑ: ์ ์ํ ์์ด์ฝ์ ๋ค์ํ ์ด์ ์ฒด์ (์: Android, Chrome OS) ๋ฐ ํด๋น ์์ด์ฝ ์คํ์ผ๊ณผ ์ํํ๊ฒ ํตํฉ๋ฉ๋๋ค.
- ๋์ ์ ๋ฐ์ดํธ: ์ ์ํ ์์ด์ฝ์ ์ฑ ๋ด์ ์๋ก์ด ๊ธฐ๋ฅ, ํ๋ก๋ชจ์ ๋๋ ๋ณ๊ฒฝ ์ฌํญ์ ๋ฐ์ํ๋๋ก ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
์ ์ํ ์์ด์ฝ์ ํต์ฌ ๊ตฌ์ฑ ์์ ์ดํด
PWA์ ๋ํ ์ ์ํ ์์ด์ฝ์ ๊ตฌํํ๋ ค๋ฉด ์ฌ๋ฌ ํต์ฌ ๊ตฌ์ฑ ์์๋ฅผ ์ดํดํด์ผ ํฉ๋๋ค.- ๋งค๋ํ์คํธ ํ์ผ(manifest.json): ์ด ์ค์ํ ํ์ผ์ PWA์ ์ค์ ๊ตฌ์ฑ ์ญํ ์ ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์ด๋ฆ, ์์ URL, ํ์ ๋ชจ๋ ๋ฐ ์ค์ํ ์์ด์ฝ ์ธ๋ถ ์ ๋ณด๋ฅผ ํฌํจํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฉํ๋ฐ์ดํฐ๊ฐ ์ค๋ช ๋์ด ์์ต๋๋ค. ๋งค๋ํ์คํธ ํ์ผ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์น ์ฑ์ ๊ธฐ๋ณธ ์ฑ์ฒ๋ผ ์ฒ๋ฆฌํ ์ ์๋๋ก ํ๋ ๊ฒ์ ๋๋ค.
- ์์ด์ฝ ์์ฐ: ์ ์ํ ์์ด์ฝ์ ๋ง๋๋ ๋ฐ ์ฌ์ฉ๋ ์ด๋ฏธ์ง์ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ค์ํ ์ฅ์น์์ ์ต์ ์ ๋ ๋๋ง์ ๋ณด์ฅํ๊ธฐ ์ํด ์ฌ๋ฌ ์์ด์ฝ ํฌ๊ธฐ๊ฐ ํ์ํฉ๋๋ค. ์์ด์ฝ ์์ฐ์ ๋งค๋ํ์คํธ ํ์ผ ๋ด์์ ์ฐธ์กฐ๋ฉ๋๋ค.
- `purpose` ์์ฑ: ๋งค๋ํ์คํธ ํ์ผ์ `icons` ๋ฐฐ์ด ๋ด์์ `purpose` ์์ฑ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์์ด์ฝ์ด ์ฌ์ฉ๋๋ ๋ฐฉ์์ ์ง์ ํฉ๋๋ค. ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ๊ฐ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- `any`: ์์ด์ฝ์ ๋ชจ๋ ์ฉ๋๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๊ฒ์ ์ผ๋ฐ์ ์ผ๋ก ๋จ์ํ๊ณ ํน๋ณํ ๋์์ธ ๊ณ ๋ ค ์ฌํญ์ด ์๋ ์์ด์ฝ์ ์ฌ์ฉ๋ฉ๋๋ค.
- `maskable`: ์ ์ํ ์์ด์ฝ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์์ด์ฝ์ด ์ ๋๋ ๋ฅ๊ทผ ์ฌ๊ฐํ๊ณผ ๊ฐ์ ๋ค์ํ ๋ชจ์์ผ๋ก ์๋ฆฌ๋๋ก ์ค๊ณ๋์์์ ๋ํ๋ ๋๋ค. ์์ด์ฝ์๋ ํจ๋ฉ๊ณผ ์๋ฆด ๋ ํ์๋๋ ๋ฐฐ๊ฒฝ์ด ์์ด์ผ ํฉ๋๋ค.
- `monochrome`: ๋จ์ผ ์์๋ง ์ง์๋๊ฑฐ๋ ํ ๋ง ์ง์ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ ๋จ์ ์์ด์ฝ์ ์ง์ ํฉ๋๋ค.
- ์์ด์ฝ ๋ชจ์ ๋ฐ ๋ง์คํฌ: ์ ์ํ ์์ด์ฝ์ ๋ง์คํฌ๋ฅผ ์ฌ์ฉํ์ฌ ์์ด์ฝ์ ์ด์ ์ฒด์ ์์ ์ง์ํ๋ ๋ค์ํ ๋ชจ์์ผ๋ก ๋ณํํฉ๋๋ค. ์ด๋ฅผ ํตํด ์์ด์ฝ์ ์ฅ์น์ UI ๋์์ธ์ ๋ง๊ฒ ์กฐ์ ํ ์ ์์ต๋๋ค. `maskable` ๋ชฉ์ ์ ์ฌ์ฉํ๋ฉด ์์ ์์ด ์์ด์ฝ ๋ชจ์์ ๋ง๋ค ์ ์์ต๋๋ค.
์ ์ํ ์์ด์ฝ ์์ ๋ง๋ค๊ธฐ
์์ด์ฝ ์์ ์ ๋ง๋๋ ๊ฒ์ ์ค์ํ ๋จ๊ณ์ ๋๋ค. ๋ค์์ ํ๋ก์ธ์ค ๋ถ์์ ๋๋ค.
1. ๋์์ธ ๊ณ ๋ ค ์ฌํญ
์ ์ํ ์์ด์ฝ์ ๋์์ธํ ๋ ๋ค์ ์ฌํญ์ ์ผ๋์ ๋์ญ์์ค.
- ๋ฐฐ๊ฒฝ: ์์ด์ฝ์ ๋ฐฐ๊ฒฝ์ ๊ณ ๋ คํ์ญ์์ค. ์ค๋ฆฝ์ ์ด๊ฑฐ๋ ๋ค๋ฅธ ์ด์ ์ฒด์ ์ ๋ชจ์์ ๋ณด์ํ๋๋ก ์ค๊ณ๋์ด์ผ ํฉ๋๋ค.
- ํจ๋ฉ: ๋ค์ํ ๋ง์คํฌ ๋ชจ์์ ์์ฉํ ์ ์๋๋ก ์์ด์ฝ ๊ฐ์ฅ์๋ฆฌ ์ฃผ์์ ์ถฉ๋ถํ ํจ๋ฉ์ ๋จ๊ฒจ๋์ญ์์ค. ๊ฒฝํ์ ์ข์ ๊ท์น์ ์ต์ 20%์ ํจ๋ฉ์ ๋จ๊ธฐ๋ ๊ฒ์ ๋๋ค.
- ๋จ์์ฑ: ๋์์ธ์ ๋จ์ํ๊ณ ๋ช ํํ๊ฒ ์ ์งํ์ฌ ์์ ํฌ๊ธฐ์์๋ ๊ฐ๋ ์ฑ์ ํ๋ณดํ์ญ์์ค. ๋ง์คํน ์ค์ ์์ค๋ ์ ์๋ ๋ณต์กํ ์ธ๋ถ ์ฌํญ์ ํผํ์ญ์์ค.
- ๋ธ๋๋ ์ผ๊ด์ฑ: ์์ด์ฝ์ด ๋ธ๋๋์ ์ ๋ฐ์ ์ธ ์๊ฐ์ ์์ด๋ดํฐํฐ์ ์ผ์นํ๋์ง ํ์ธํ์ญ์์ค.
2. ์ ํฉํ ๋๊ตฌ ์ ํ
์ฌ๋ฌ ๋๊ตฌ๊ฐ ์ ์ํ ์์ด์ฝ ์์ ์ ๋ง๋๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ๋์์ธ ์ํํธ์จ์ด: Adobe Photoshop, Adobe Illustrator, Sketch ๋ฐ Figma๋ ๊ณ ํ์ง ์์ด์ฝ์ ๋์์ธํ๋ ๋ฐ ๋๋ฆฌ ์ฌ์ฉ๋๋ ์ ํ ์ฌํญ์ ๋๋ค.
- ์์ด์ฝ ์์ฑ๊ธฐ: ์จ๋ผ์ธ ์์ด์ฝ ์์ฑ๊ธฐ๋ ์ฌ๋ฌ ์์ด์ฝ ํฌ๊ธฐ ๋ฐ ํ์์ ๋ง๋๋ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ ์ ์์ต๋๋ค. ๋ช ๊ฐ์ง ์ธ๊ธฐ ์๋ ์ต์ ์ผ๋ก๋ RealFaviconGenerator, PWA Builder ๋ฐ Icon Kitchen์ด ์์ต๋๋ค.
- ์์ด์ฝ ๋ผ์ด๋ธ๋ฌ๋ฆฌ: ๋ฏธ๋ฆฌ ๋์์ธ๋ ์์ด์ฝ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์๊ฐ๊ณผ ๋ ธ๋ ฅ์ ์ ์ฝํ๊ณ ์ฑ ์ ์ฒด์์ ์ผ๊ด์ฑ์ ์ ์งํ ์ ์์ต๋๋ค. Material Icons ๋ฐ Font Awesome๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ด๋ฒ์ํ ์์ด์ฝ์ ์ ๊ณตํฉ๋๋ค.
3. ์์ด์ฝ ํฌ๊ธฐ ์์ฑ
๋ค์ํ ์ฅ์น ํด์๋์ ๋ง๊ฒ ์ฌ๋ฌ ์์ด์ฝ ํฌ๊ธฐ๋ฅผ ๋ง๋ค์ด์ผ ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ ํฌ๊ธฐ๊ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- 192x192 px: ๋๋ถ๋ถ์ ์ฅ์น์ ์ ํฉํฉ๋๋ค.
- 512x512 px: ๊ณ ํด์๋ ๋์คํ๋ ์ด ์ง์.
- ๊ธฐํ ํฌ๊ธฐ: ๋ ๊ด๋ฒ์ํ ํธํ์ฑ์ ์ํด 72x72, 96x96, 144x144 ๋ฐ 152x152 px์ ๊ฐ์ ํฌ๊ธฐ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
4. ๋ง์คํฌ ๊ฐ๋ฅํ ์์ด์ฝ
์ ์ํ ์์ด์ฝ์ ๊ฒฝ์ฐ ํนํ `maskable` ์์ด์ฝ์ ๋ง๋ค์ด์ผ ํฉ๋๋ค. ๋ง์คํฌ ๊ฐ๋ฅํ ์์ด์ฝ์ ๋ง๋ค ๋ ๋์์ธ์ ๋ค์ํ ๋ชจ์์ผ๋ก ์๋ฆด ๋ ์ ์๋ํด์ผ ํฉ๋๋ค. ๋์์ธ์ด ์ ๋๋ ๋ฅ๊ทผ ์ฌ๊ฐํ์ผ๋ก ์ด๋ป๊ฒ ๋ํ๋ ์ง ๊ณ ๋ คํ์ญ์์ค. ์์ด์ฝ์ ํต์ฌ ๋ถ๋ถ์ด ์๋ฆฌ์ง ์๋๋ก ์์ ์์ญ(๋ด๋ถ ์์ญ) ๋ด์ ์๋์ง ํ์ธํ์ญ์์ค.
PWA ๋งค๋ํ์คํธ ํ์ผ ๊ตฌ์ฑ
๋งค๋ํ์คํธ ํ์ผ(manifest.json)์ PWA ๊ตฌ์ฑ์ ํต์ฌ์
๋๋ค. ์ ์ํ ์์ด์ฝ์ ๋ํด ๊ตฌ์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
{
"name": "My Awesome App",
"short_name": "MyApp",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/images/icon-monochrome.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "monochrome"
}
]
}
์ค๋ช :
- `name`: PWA์ ์ ์ฒด ์ด๋ฆ.
- `short_name`: ๊ณต๊ฐ์ด ์ ํ๋ ๋ ์ฌ์ฉ๋๋ ์ด๋ฆ์ ์งง์ ๋ฒ์ .
- `start_url`: PWA๊ฐ ์ด๋ฆฌ๋ URL.
- `display`: PWA๋ฅผ ํ์ํด์ผ ํ๋ ๋ฐฉ์(์: `standalone`, `fullscreen`, `minimal-ui`, `browser`)์ ์ง์ ํฉ๋๋ค. `standalone`์ ๊ธฐ๋ณธ ์ฑ๊ณผ ์ ์ฌํ ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค.
- `background_color`: ์์ ํ๋ฉด์ ๋ฐฐ๊ฒฝ์.
- `theme_color`: ํด๋ฐ ๋ฐ ๊ธฐํ UI ์์์ ์์.
- `icons`: ์์ด์ฝ ๊ฐ์ฒด์ ๋ฐฐ์ด. ๊ฐ ๊ฐ์ฒด๋ ์์ด์ฝ ์์ ์ ์ค๋ช ํฉ๋๋ค.
- `src`: ์์ด์ฝ ์ด๋ฏธ์ง์ ๊ฒฝ๋ก.
- `sizes`: ์์ด์ฝ ์ด๋ฏธ์ง์ ํฌ๊ธฐ(์: "192x192").
- `type`: ์์ด์ฝ ์ด๋ฏธ์ง์ MIME ์ ํ(์: "image/png").
- `purpose`: ์์ด์ฝ์ ์ฌ์ฉํด์ผ ํ๋ ๋ฐฉ์(์: `any`, `maskable`, `monochrome`)์ ์ง์ ํฉ๋๋ค.
PWA์ ๋งค๋ํ์คํธ ํ์ผ ํตํฉ
๋งค๋ํ์คํธ ํ์ผ์ ๋ง๋ ํ HTML ๋ฌธ์์ ์ฐ๊ฒฐํด์ผ ํฉ๋๋ค. HTML์ <head> ์น์
๋ด์ ๋ค์ ์ค์ ์ถ๊ฐํ์ญ์์ค.
<link rel="manifest" href="/manifest.json">
๋งค๋ํ์คํธ ํ์ผ์ ๊ฒฝ๋ก๊ฐ ์ฌ๋ฐ๋ฅธ์ง ํ์ธํ์ญ์์ค.
ํ ์คํธ ๋ฐ ๋๋ฒ๊น
๋งค๋ํ์คํธ ํ์ผ ๋ฐ ์์ด์ฝ ์์ ์ ๊ตฌํํ ํ ๋ชจ๋ ๊ฒ์ด ์์๋๋ก ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ์ฅ์น ๋ฐ ํ๋ซํผ์์ PWA๋ฅผ ํ ์คํธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ค์์ ๋ฐ๋ผ์ผ ํ ์ฃผ์ ๋จ๊ณ์ ๋๋ค.
- PWA ์ค์น: ์์ด์ฝ์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ์ฅ์น(Android, Chrome OS ๋ฑ)์ PWA๋ฅผ ์ค์นํฉ๋๋ค.
- ์์ด์ฝ ๋ชจ์ ํ์ธ: ํ ํ๋ฉด, ์ฑ ๋ฐ์ฒ ๋ฐ ๊ธฐํ ์ปจํ ์คํธ์์ ์์ด์ฝ์ด ์ด๋ป๊ฒ ๋ํ๋๋์ง ๊ฒ์ฌํฉ๋๋ค.
- ๊ฐ๋ฐ์ ๋๊ตฌ ์ฌ์ฉ: ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ(์: Chrome DevTools)๋ฅผ ํ์ฉํ์ฌ ์ฝ์์์ ์ค๋ฅ๊ฐ ์๋์ง ํ์ธํ๊ณ ๋งค๋ํ์คํธ ํ์ผ ๋ฐ ์์ด์ฝ ์์ ์ ๊ฒ์ฌํฉ๋๋ค. "Application" ๋๋ "Manifest" ํญ์ ํ์ธํ์ฌ ๋งค๋ํ์คํธ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌ๋ฌธ ๋ถ์๋๊ณ ์๋์ง ํ์ธํฉ๋๋ค.
- ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ํด์๋ ํ ์คํธ: ์์ ์ค๋งํธํฐ์์ ํฐ ํ๋ธ๋ฆฟ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ์ฅ์น์์ ์์ด์ฝ์ด ๋ณด๊ธฐ ์ข๊ฒ ๋ํ๋๋์ง ํ์ธํฉ๋๋ค.
- ์จ๋ผ์ธ PWA ์ ํจ์ฑ ๊ฒ์ฌ๊ธฐ ์ฌ์ฉ: PWA Builder ๊ฐ์ฌ ๋๊ตฌ์ ๊ฐ์ ์จ๋ผ์ธ PWA ์ ํจ์ฑ ๊ฒ์ฌ๊ธฐ๋ฅผ ํ์ฉํ์ฌ ์ผ๋ฐ์ ์ธ ๋ฌธ์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ํ์ธํฉ๋๋ค. ์ด๋ฌํ ๋๊ตฌ๋ ์ค๋ฅ๋ฅผ ์๋ณํ๊ณ ๊ฐ์ ์ ์ํ ๊ถ์ฅ ์ฌํญ์ ์ ๊ณตํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- Android ํน์ ํ ์คํธ: Android ์ฅ์น๋ฅผ ๋์์ผ๋ก ํ๋ ๊ฒฝ์ฐ Android ์๋ฎฌ๋ ์ดํฐ ๋๋ ์ค์ Android ์ฅ์น๋ฅผ ์ฌ์ฉํ์ฌ PWA๋ฅผ ์ฒ ์ ํ ํ ์คํธํ ์ ์์ต๋๋ค.
๊ณ ๊ธ ๊ธฐ์ ๋ฐ ๊ณ ๋ ค ์ฌํญ
๊ธฐ๋ณธ ์ฌํญ์ ๋ง์คํฐํ ํ ์ด๋ฌํ ๊ณ ๊ธ ๊ธฐ์ ์ ๊ณ ๋ คํ์ฌ ์ ์ํ ์์ด์ฝ ๊ตฌํ์ ํฅ์์ํค์ญ์์ค.
๋์ ์์ด์ฝ ์ ๋ฐ์ดํธ
PWA์ ์ค์ํ ์ฅ์ ์ค ํ๋๋ ์ฑ ์์ด์ฝ์ ํฌํจํ์ฌ ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํ ์ ์๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ ์ฑ ๋ด์์ ์๋ก์ด ๊ธฐ๋ฅ, ํ๋ก๋ชจ์ ๋๋ ์ค์๊ฐ ์ ๋ณด๋ฅผ ๋ฐ์ํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
์:
๋ณํํ๋ ์์ด์ฝ์ผ๋ก ์ต์ ์๋ณด๋ฅผ ํ์ํ๋ ๋ด์ค ์ฑ์ ์์ํด ๋ณด์ญ์์ค. HTML์ <head>์์ <link rel="icon"> ํ๊ทธ์ `src` ์์ฑ์ ์์ ํ๊ฑฐ๋ Javascript๋ฅผ ํตํด ๋ฐํ์์ ์์ด์ฝ์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ ์ ์์ต๋๋ค.
- ์๋ฒ ๋๋ ํด๋ผ์ด์ธํธ ์ธก์์ ์ ์์ด์ฝ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.
- `fetch` API๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ๋ค์ด๋ก๋ํฉ๋๋ค.
- `manifest.json` ๋๋
<link rel="icon">ํ๊ทธ๋ฅผ ์ ์ด๋ฏธ์ง URL๋ก ์ ๋ฐ์ดํธํฉ๋๋ค. - ๋๋ ์๋น์ค ์์ปค ๋ด์์ ์์ด์ฝ์ ๋์ ์ผ๋ก ์์ ํ์ฌ `manifest.json` ๋๋ HTML์ ๋ณ๊ฒฝํ์ง ์๊ณ ์์ด์ฝ์ ์ ๋ฐ์ดํธํฉ๋๋ค.
์ฝ๋ ์ค๋ํซ(JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ์์ด์ฝ์ ์ ๋ฐ์ดํธํ๋ ์):
function updateIcon(newIconURL) {
const link = document.querySelector('link[rel="icon"]') || document.createElement('link');
link.rel = 'icon';
link.href = newIconURL;
document.head.appendChild(link);
}
// Example usage:
updateIcon('/images/new-icon.png');
manifest.json ํ์ผ์ด ์บ์๋ ๊ฒฝ์ฐ ๋งค๋ํ์คํธ ํ์ผ์์ ์์ด์ฝ๋ ์ ๋ฐ์ดํธํด์ผ ํฉ๋๋ค.
ํ ๋ง ์ง์ ๋ฐ ์์ ์ฌ์ฉ์ ์ง์
PWA ๋ด์์ ํ ๋ง ์ง์ ์ต์ ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์๊ฐ ์์ด์ฝ์ ํฌํจํ ์ฑ ๋ชจ์์ ์ฌ์ฉ์ ์ง์ ํ ์ ์๋๋ก ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ด๋ ์ฌ์ฉ์ ์ฐธ์ฌ ๋ฐ ๊ฐ์ธํ๋ฅผ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์:
์ฌ์ฉ์๊ฐ ์์ ์ฒด๊ณ๋ฅผ ์ ํํ์ฌ ์์ด์ฝ ๋ฐ ๊ธฐํ UI ์์๋ฅผ ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํ ์ ์๋๋ก ํ์ฉํฉ๋๋ค. ๊ธฐ๋ณธ ์์ด์ฝ์ ๊ฐ์ง ์ ์์ผ๋ฉฐ ์ฌ์ฉ์ ์ ํ์ ๋ฐ๋ผ ์์ด์ฝ์ ๋ค๋ฅธ ์์ ๋ฒ์ ์ผ๋ก ๋ณ๊ฒฝํ๋ ์ต์ ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ๊ทธ๋ฐ ๋ค์ ์์ ์ฒด๊ณ๋ฅผ ์ฌ์ฉํ์ฌ ๋งค๋ํ์คํธ ํ์ผ ๋๋ CSS ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ๊ฒฝ ๋ฐ ํ ๋ง ์์์ ์์ ํ ์ ์์ต๋๋ค.
์ด๋ ๋ํ ์์คํ ํ ๋ง ์ง์ ๋๋ ์ฌ์ฉ์ ์ง์ ํ ๋ง ์ง์ ์ ์์ฐ์ค๋ฝ๊ฒ ์ํํ ์ ์๋๋ก ๋จ์ ์์ด์ฝ์ ์ ๊ณตํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ
์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์์ด์ฝ์ ์ ๊ทผํ ์ ์๋๋ก ํฉ๋๋ค.
- ์์ ๋๋น: ์์ด์ฝ ๋์์ธ๊ณผ ๋ฐฐ๊ฒฝ ์ฌ์ด์ ์ถฉ๋ถํ ์์ ๋๋น๋ฅผ ์ ์งํฉ๋๋ค.
- ๋์ฒด ํ ์คํธ: ์์ด์ฝ์ ์ง์ ์ ์ฉ๋์ง๋ ์์ง๋ง ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํ๊ณ ์๋ฏธ๋ก ์ HTML์ ์ฌ์ฉํ๋ ๊ฒ์ ํฌํจํ์ฌ PWA์ ์ ๋ฐ์ ์ธ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ณด์กฐ ๊ธฐ์ ์ ์ฌ์ฉํ ํ ์คํธ: ํ๋ฉด ํ๋ ๊ธฐ ๋ฐ ๊ธฐํ ๋ณด์กฐ ๊ธฐ์ ๋ก PWA๋ฅผ ํ ์คํธํ์ฌ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ์๋ณํฉ๋๋ค.
ํฌ๋ก์ค ํ๋ซํผ ํธํ์ฑ
PWA๋ ๋ค์ํ ํ๋ซํผ์์ ์ํํ๊ฒ ์๋ํด์ผ ํฉ๋๋ค. ๋ค์ํ ์ฅ์น ๋ฐ ๋ธ๋ผ์ฐ์ (Chrome, Firefox, Safari, Edge)์์ ์ ์ํ ์์ด์ฝ์ ํ ์คํธํ์ฌ ์ผ๊ด๋ ๋ ๋๋ง์ ํ์ธํฉ๋๋ค. ํฌ๊ด์ ์ธ ํธํ์ฑ์ ์ํด์๋ ์๋ฎฌ๋ ์ดํฐ ๋ฐ ์ค์ ์ฅ์น ํ ์คํธ๊ฐ ํ์์ ์ ๋๋ค.
์ฑ๋ฅ ์ต์ ํ
์์ด์ฝ ์์ ์ ์ฑ๋ฅ์ ์ต์ ํํฉ๋๋ค.
- ์ด๋ฏธ์ง ์์ถ: ํ์ง ์ ํ ์์ด ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์์ด์ฝ ์ด๋ฏธ์ง๋ฅผ ์์ถํฉ๋๋ค. ์ด๋ฏธ์ง ์์ถ ๋๊ตฌ ๋๋ ์๋น์ค๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฅผ ๋ฌ์ฑํฉ๋๋ค.
- ์ด๋ฏธ์ง ํ์: ํน์ฑ ๋ฐ ๊ธฐ๋ฅ์ ๋ฐ๋ผ ์ ์ ํ ์ด๋ฏธ์ง ํ์(์: PNG, WebP)์ ์ฌ์ฉํฉ๋๋ค. WebP๋ ์ผ๋ฐ์ ์ผ๋ก PNG๋ณด๋ค ๋ ๋์ ์์ถ์ ์ ๊ณตํฉ๋๋ค.
- ์บ์ฑ: ์์ด์ฝ์ด ๋ธ๋ผ์ฐ์ ์ ์ํด ์บ์๋๊ณ ํจ์จ์ ์ผ๋ก ๋ค์ด๋ก๋๋๋๋ก ์บ์ฑ ์ ๋ต์ ๊ตฌํํฉ๋๋ค. ๊ณต๊ฒฉ์ ์ธ ์บ์ฑ ์ ๋ต์๋ ์๋น์ค ์์ปค๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ค์๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ๋์ ์์ด์ฝ(๊ณ ๊ธ ์)
์ด ์์์๋ ์ค์๊ฐ ์ซ์๋ก ์์ด์ฝ์ ์ ๋ฐ์ดํธํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฑ ๋ด์์ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์์ต๋๋ค.
์๋๋ฆฌ์ค: ์ฃผ์ ์์ฅ PWA. ์์ด์ฝ์ ์ค์๊ฐ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ ํ์ฌ ์ฃผ๊ฐ๋ฅผ ํ์ํฉ๋๋ค.
- ์๋ฒ ์ธก ๊ตฌ์ฑ ์์: ์๋ฒ๋ ์ง์์ ์ผ๋ก ์ฃผ๊ฐ๋ฅผ ๊ฐ์ ธ์ JSON ํ์์ผ๋ก ์ ๊ณตํฉ๋๋ค.
- ํด๋ผ์ด์ธํธ ์ธก: ์๋น์ค ์์ปค๊ฐ ๊ฐ๊ฒฉ์ ๋ค์ด๋ก๋ํฉ๋๋ค.
- ํด๋ผ์ด์ธํธ ์ธก: ์๋น์ค ์์ปค๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ซ์๊ฐ ์๋ ์ ์์ด์ฝ์ ๊ทธ๋ฆฝ๋๋ค.
์ด ์๋ ๊ฐ๋ต์ ์ธ ๊ฐ์์ ๋๋ค. ํ๋ก๋์ ํ๊ฒฝ์ ์ ํฉํ ์๋ฃจ์ ์ ๊ตฌํํ๋ ค๋ฉด ์ ์ฌ์ ์ธ ๋คํธ์ํฌ ๋ฌธ์ , ์บ์ฑ ๋ฐ ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ์ ์คํ ๊ณํ์ด ํ์ํฉ๋๋ค.
์ผ๋ฐ์ ์ธ ๋ฌธ์ ํด๊ฒฐ
๊ตฌํ ๊ณผ์ ์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ์์ด์ฝ์ด ํ์๋์ง ์์:
- ๋งค๋ํ์คํธ ํ์ผ ๊ฒฝ๋ก ํ์ธ: HTML์์
manifest.jsonํ์ผ์ ๊ฒฝ๋ก๊ฐ ์ฌ๋ฐ๋ฅธ์ง ํ์ธํฉ๋๋ค. - ์์ด์ฝ ๊ฒฝ๋ก ํ์ธ: ๋งค๋ํ์คํธ ํ์ผ์์ ์์ด์ฝ ์ด๋ฏธ์ง์ ๊ฒฝ๋ก๊ฐ ์ฌ๋ฐ๋ฅธ์ง ํ์ธํฉ๋๋ค.
- ๋ธ๋ผ์ฐ์ ์บ์: ๋ธ๋ผ์ฐ์ ์บ์๋ฅผ ์ง์ฐ๊ฑฐ๋ ๊ฐ์ ๋ก ๋ค์ ๋ก๋ํ์ฌ ์ต์ ๋ณ๊ฒฝ ์ฌํญ์ด ๋ก๋๋์๋์ง ํ์ธํฉ๋๋ค.
- ๊ฐ๋ฐ์ ๋๊ตฌ: ๊ฐ๋ฐ์ ๋๊ตฌ์ "Application" ๋๋ "Manifest" ํญ์ ๊ฒ์ฌํ์ฌ ๋งค๋ํ์คํธ ํ์ผ์ด ๋ก๋๋์๊ณ ์์ด์ฝ ์ ์๊ฐ ํฌํจ๋์ด ์๋์ง ํ์ธํฉ๋๋ค.
- ๋งค๋ํ์คํธ ํ์ผ ๊ฒฝ๋ก ํ์ธ: HTML์์
- ์์ด์ฝ์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ง์คํฌ๋์ง ์์:
- Purpose ์์ฑ: ์ ์ํ ์์ด์ฝ์ ๋ํด
"maskable"๋ชฉ์ ์ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํฉ๋๋ค. - ํจ๋ฉ: ์์ด์ฝ ๋์์ธ์ ๋ง์คํฌ ๋ชจ์์ ์ถฉ๋ถํ ํจ๋ฉ์ด ์๋์ง ํ์ธํฉ๋๋ค.
- ๋์์ธ ํธํ์ฑ: ์์ด์ฝ ๋์์ธ์ ๊ฒํ ํ์ฌ ๋ง์คํฌ์ ํธํ๋๋์ง ํ์ธํฉ๋๋ค. ๊ฐ๋จํ ๋์์ธ์ด ๊ฐ์ฅ ์ ์๋ํ๋ ๊ฒฝํฅ์ด ์์ต๋๋ค.
- ์ฌ๋ฌ ์ฅ์น์์ ํ ์คํธ: ์์ด์ฝ์ด ์์๋๋ก ํ์๋๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ์ฅ์น์์ ํ ์คํธํฉ๋๋ค.
- Purpose ์์ฑ: ์ ์ํ ์์ด์ฝ์ ๋ํด
- ์์ด์ฝ ํฌ๊ธฐ ๋ฌธ์ :
- ์๋ชป๋ ํฌ๊ธฐ ์ ์: ๋งค๋ํ์คํธ ํ์ผ์์ ์ฌ๋ฐ๋ฅธ ํฌ๊ธฐ๋ฅผ ์ ์ํ๋์ง ํ์ธํฉ๋๋ค.
- ํด์๋ ํธํ์ฑ: ๊ด๋ฒ์ํ ํ๋ฉด ํด์๋ ๋ฐ ์ฅ์น ๋ฐ๋์ ๋ง๊ฒ ๋ค์ํ ์์ด์ฝ ํฌ๊ธฐ๋ฅผ ๋ง๋ญ๋๋ค.
- ๋งค๋ํ์คํธ ๊ตฌ๋ฌธ ๋ถ์ ์ค๋ฅ:
- ๊ตฌ๋ฌธ ์ค๋ฅ:
manifest.jsonํ์ผ์์ ๊ตฌ๋ฌธ ์ค๋ฅ(์: ๋๋ฝ๋ ์ผํ, ์๋ชป๋ ๋ฐ์ดํ)๊ฐ ์๋์ง ํ์ธํฉ๋๋ค. ์จ๋ผ์ธ JSON ์ ํจ์ฑ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค. - ์๋ชป๋ ์์ฑ: ๋งค๋ํ์คํธ ํ์ผ์์ ์ ํจํ ์์ฑ์ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํฉ๋๋ค.
- ๊ตฌ๋ฌธ ์ค๋ฅ:
๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ๋ฏธ๋ ๋ํฅ
๋ค์์ ๋ฐ๋ผ์ผ ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก์ ๋ฏธ๋์ ๋ํ ์ ๋ง์ ๋๋ค.
- ๋ง์คํฌ ํฌ์ฉ: ์ ์ํ ์์ด์ฝ์ ๋์ ๊ธฐ๋ฅ์ ํ์ฉํ๋ ์ง์ ํ ๋ง์คํฌ ๊ฐ๋ฅ ์์ด์ฝ์ ๋ง๋ญ๋๋ค.
- ์ฌ์ฉ์ ๊ฒฝํ ์ฐ์ ์: ๋จ์์ฑ, ๋ช ํ์ฑ ๋ฐ ๋ธ๋๋ ์ธ์ง๋๋ฅผ ์ผ๋์ ๋๊ณ ์์ด์ฝ์ ๋์์ธํฉ๋๋ค.
- ์๊ฒฉํ ํ ์คํธ: ๋ค์ํ ์ฅ์น, ๋ธ๋ผ์ฐ์ ๋ฐ ์ด์ ์ฒด์ ์์ ์ ์ํ ์์ด์ฝ์ ํ ์คํธํฉ๋๋ค.
- ์ต์ ์ ๋ณด ์ ์ง: ์ต์ PWA ์ฌ์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฆ ๋๋ค.
- ์ฑ๋ฅ ์ต์ ํ๊ฐ ํต์ฌ: ์์ด์ฝ์ ์์ถํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ๋ก๋ ์๊ฐ์ ์ต์ ํํฉ๋๋ค.
๋ฏธ๋ ๋ํฅ:
- ๋์ ์์ด์ฝ ์ฌ์ฉ์ ์ง์ : ๊ณ ๊ธ ๋์ ์์ด์ฝ ์ฌ์ฉ์ ์ง์ ์ต์ ์ ๋ํ ์ง์์ด ์ฆ๊ฐํ ๊ฒ์ผ๋ก ์์๋ฉ๋๋ค.
- ์๋น์ค ์์ปค ํตํฉ: ์๋น์ค ์์ปค๋ ๋์ ์์ด์ฝ์ ๊ด๋ฆฌํ๊ณ ์ ๋ฐ์ดํธํ๋ ๋ฐ ๋ ํฐ ์ญํ ์ ํ ๊ฒ์ ๋๋ค.
- ๋ ์ ๊ตํ ์ ๋๋ฉ์ด์ : ํฅํ ๋ฐ๋ณต์์๋ ๋ ๋ณต์กํ ์์ด์ฝ ์ ๋๋ฉ์ด์ ์ง์์ ๋ชจ์ํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
์ ์ํ ์์ด์ฝ์ ๊ตฌํํ๋ ๊ฒ์ ์ต์ ์ ๋งค๋ ฅ์ ์ด๊ณ ํฌ๋ก์ค ํ๋ซํผ PWA๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ด ๊ฐ์ด๋์ ์ค๋ช ๋ ๊ฐ๋ ์ ์ดํดํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๊ณ ๋๊ตฌ์ ๊ธฐ์ ์ ์ฌ์ฉํจ์ผ๋ก์จ ์ฌ์ฉ์ ์ฅ์น์ ์ํํ๊ฒ ํตํฉ๋๊ณ ๋ธ๋๋ ์ธ์ง๋๋ฅผ ๋์ด๋ฉฐ ์ฐ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ PWA ์์ด์ฝ์ ๋ง๋ค ์ ์์ต๋๋ค. ๊ฐ๋จํ ์ ์ ์์ด์ฝ์์ ์์ ํ ๋์ ์๋ฃจ์ ์ ์ด๋ฅด๊ธฐ๊น์ง ์ ์ํ ์์ด์ฝ์ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ๋งค๋ ฅ์ ์ธ ์น ๊ฒฝํ์ ๋ง๋ค๊ธฐ ์ํด ๋ ธ๋ ฅํ๋ ํ๋ ์น ๊ฐ๋ฐ์๋ฅผ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค.